<template>
  <div style="height:100%;width:100%;position:relative;" ref="maindev">
      <div class="pagetop">
          <div style="width:100%;">
              <table style="font-size:12px;white-space: nowrap;" border="0" class="table1style">
                  <!-- <col style="width:5%;" />
                  <col style="width:22%" />
                  <col style="width:5%" />
                  <col style="width:12%" />
                  <col style="width:5%" />
                  <col style="width:11%" />
                  <col style="width:5%" />
                  <col style="width:11%" />
                  <col style="width:17%" />
                  <col style="width:6%" />
                  <col style="width:6%" />
                  <col style="width:6%" /> -->
                  <tr>
                      <td align="right">签收时间</td>
                      <td style="width:280px">
                          <table style="border-spacing: 0px;width:100%;">
                              <tr>
                                  <td style="padding:0px">
                                      <el-date-picker v-model="txtstartdate" :clearable="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;">
                                      </el-date-picker>
                                  </td>
                                  <td>至</td>
                                  <td style="padding:0px">
                                      <el-date-picker v-model="txtenddate" type="date" :clearable="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;"> </el-date-picker>
                                  </td>
                              </tr>
                          </table>
                      </td>
                      <td align="center" colspan="2">
                          <table>
                              <tr>
                                  <td>
                                      <el-radio v-model="rdorcvdept" :label="1">检验科签收</el-radio>
                                      <el-radio v-model="rdorcvdept" :label="2">工作组签收</el-radio>
                                  </td>
                              </tr>
                          </table>
                      </td>
                      <td align="right">病人类型</td>
                      <td>
                          <rm-ddl-common @change="seccodeChange" datatype="seccode" kindno="PT" dataname="病人类型" v-model="txtpattype" width="200px" key="pt"></rm-ddl-common>
                      </td>
                      <td style="width:80px">
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chkreq_groupname" @change="chkevent($event,'chkreq_groupname','分单类别')">分单类别</el-checkbox>
                      </td>
                      <td style="width:80px">
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chkpat_typecode" @change="chkevent($event,'chkpat_typecode','病人类型')">病人类型</el-checkbox>
                      </td>
                      <td style="width:80px">
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chkreq_deptno" @change="chkevent($event,'chkreq_deptno','科室')">科室</el-checkbox>
                      </td>
                      <td style="width:80px">
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chkyears" @change="chkevent($event,'chkyears','年')">年</el-checkbox>
                      </td>
                  </tr>
                  <tr>
                      <td align="right">检验院区</td>
                      <td>
                          <rm-ddl-common datatype="hospital" dataname="医院" v-model="txthospcode" width="100%" @change="hospChange"></rm-ddl-common>
                      </td>
                      <td align="right">分单类别</td>
                      <td>
                          <rm-ddl-common @change="reqgroupChange" datatype="reqgroup" dataname="分单类别" v-model="txtreqgroup" width="200px"></rm-ddl-common>
                      </td>
                      <td align="right">检&nbsp;验&nbsp;组</td>
                      <td>
                          <el-select v-model="txtlabgroup" @dblclick.native="popMultipleChk(txtlabgroup,'txtlabgroup',labgroupOption,'请选择检验组别')" filterable clearable style="width:100%">
                              <el-option v-for="(item,index) in labgroupOption" :key="index" :value="item.data" :label="item.display"></el-option>
                          </el-select>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chkreq_itemname" @change="chkevent($event,'chkreq_itemname','项目')">项目</el-checkbox>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chkrecieve_user" @change="chkevent($event,'chkrecieve_user','签收人')">签收人</el-checkbox>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chkreq_wardno" @change="chkevent($event,'chkreq_wardno','病区')">病区</el-checkbox>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chkmonths" @change="chkevent($event,'chkmonths','月')">月</el-checkbox>
                      </td>
                  </tr>
                  <tr>
                      <td align="right">申请科室</td>
                      <td>
                          <el-select v-model="txtreqdeptno" @dblclick.native="popMultipleChk(txtreqdeptno,'txtreqdeptno',deptOption,'申请科室选择')" filterable clearable style="width:100%">
                              <el-option v-for="(item,index) in deptOption" :key="index" :value="item.data" :label="item.display">
                              </el-option>
                          </el-select>
                      </td>
                      <td align="right">申请病区</td>
                      <td>
                          <el-select v-model="txtwardno" @dblclick.native="popMultipleChk(txtwardno,'txtwardno',wardOption,'病区选择')" filterable clearable style="width:100%">
                              <el-option v-for="(item,index) in wardOption" :key="index" :value="item.data" :label="item.display">
                              </el-option>
                          </el-select>
                      </td>
                      <td></td>
                      <td></td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chkhospcode" @change="chkevent($event,'chkhospcode','院区')">院区</el-checkbox>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chklabgroupid" @change="chkevent($event,'chklabgroupid','检验工作组')">检验工作组</el-checkbox>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chksend_user" @change="chkevent($event,'chksend_user','运送人')">运送人</el-checkbox>
                      </td>
                      <td>
                          <el-checkbox true-label="1" false-label="0" v-model="chklist.chkdays" @change="chkevent($event,'chkdays','日')">日</el-checkbox>
                      </td>
                  </tr>
              </table>
              <div class="operation-list">
                  <el-button @click.native="BtnQuery" v-has="'PINQUERY'" type="primary" icon="el-icon-search">查询</el-button>
                  <el-button @click.native="BtnSort" icon="el-icon-sort">排序</el-button>
                  <el-button @click.native="BtnClear" icon="el-icon-close">清除</el-button>
                  <el-button @click.native="BtnExport" icon="el-icon-download">导出</el-button>
                  <!-- <el-button @click.native="BtnPrint('p')" icon="el-icon-printer">打印</el-button>
                  <el-button @click.native="BtnPrint('D')" class="el-icon-printer">打印样式设计</el-button> -->
              </div>
          </div>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
              <vxe-table :data.sync="tableData" :select-config="{reserve: true}" :sort-config="{trigger: 'cell'}" border height="auto" highlight-current-row class="mytable-style" highlight-hover-column highlight-hover-row how-header-overflow ref="xTable" resizable show-overflow size="mini" stripe show-header-overflow :optimization="{animat: false}" header-align="center" :key="xTablekey" show-footer :footer-method="footerMethod" :footer-cell-class-name="footerCellClassName" :loading="xTableLoading">
                  <vxe-table-column type="index" title="NO." width="50" header-align="center" align="center"></vxe-table-column>
                  <vxe-table-column :field="items.field" :key="items.field" :title="items.title" :width="items.width" sortable v-for="items in tableColumn" :formatter="formatFun"></vxe-table-column>
                  <vxe-table-column field="cp_samplecnt" sortable title="标本数" width="70" header-align="center" align="right"></vxe-table-column>
                  <vxe-table-column field="cp_cnt" sortable title="项次" width="70" header-align="center" align="right"></vxe-table-column>
                  <vxe-table-column field="cp_rs" sortable title="人次" width="70" header-align="center" align="right"></vxe-table-column>
              </vxe-table>
          </div>
      </div>

      <!--多选弹窗--->
      <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="multichktitle" :visible.sync="dialogMultipleVisible" :destroy-on-close="true">
          <rm-SqlMultiple :leftOption="option1" :rightOption="option2" :name="fieldname" @change="closedialog"></rm-SqlMultiple>
      </el-dialog>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "LIS621",
  data() {
      return {
          sexOption: [
              { label: "", value: "" },
              { label: "男", value: "1" },
              { label: "女", value: "2" },
          ],
          chargeflagOption: [
              { label: "未收费", value: "0" },
              { label: "已收费", value: "1" },
              { label: "等待退费", value: "8" },
              { label: "已退费", value: "9" },
              { label: "免费", value: "5" },
          ],

          is_showselother: false,
          dialogcountItem: false,
          dialogMultipleVisible: false,
          xTableLoading: false,
          option1: [],
          option2: [],
          fieldname: "",
          tableColumn: [],
          tableData: [],
          tableData1: [],
          showseq: 1,
          currRowIndex: 0,
          xTablekey: 0,
          datename: "标本日期",
          multichktitle: "",
          datecode: "sam",
          txtstasticsmod: "", //弹窗统计模版
          stasticsmodOption: [], //统计模版列表
          txtquerymod: "", //查询模版
          querymodOption: [], //查询模版列表
          pattypeOption: [],
          deptOption: [],
          wardOption: [],
          hospOption: [],
          doctorOption: [],
          rptunitOption: [],
          rptunitGroupOption: [],
          reportcommOption: [],
          labgroupOption: [],
          //以下为查询条件
          txtstartdate: "",
          txtenddate: "",
          txthospcode: "",
          txtreqdeptno: "",
          txtlabgroup: "",
          txtreqgroup: "",
          txtpattype: "",
          rdorcvdept: 1,
          txtwardno: "",
          infocode: "",
          infoitem: "",
        //以下为统计项目

          chklist: {
              chkreq_groupname: false,
              chkreq_itemname: false,
              chkhospcode: false,
              chkpat_typecode: false,
              chkrecieve_user: false,
              chklabgroupid: false,
              chkreq_deptno: false,
              chkreq_wardno: false,
              chkyears: false,
              chkmonths: false,
              chkdays: false,
              chksend_user: false,
          },

          //以下为排序数组
          sortArr: [],
          SortTableColumn: [
              { title: "标本数", field: "cp_samplecnt" },
              { title: "人次", field: "cp_rs" },
              { title: "项次", field: "cp_cnt" },
          ],
          rcvstatisticstyle: "",
          userno: this.$tool.getSession(this.$tool.loginuserno),
          chkcnt: 0,
          exportTableColLen: 0,
          pattypename: "",
          hospname: "",
          reqgroupname: "",
      };
  },
  created() {
      this.initOption();
      this.initdate(); //初始化时间
      //this.InitPage(); //初始化主列表
  },
  mounted() {},
  updated() {},
  methods: {
      popMultipleChk(e, fieldname, option, title) {
          let temp = XEUtils.clone(option, true);
          this.option1 = [];
          this.option2 = [];
          if (e != "") {
              let k = e.split(",");
              k.forEach((item) => {
                  let ndata = temp.find((m) => m.data == item);
                  if (ndata != undefined && ndata != null) {
                      this.option2.push(ndata);
                  }
              });
              temp.forEach((item) => {
                  if (k.indexOf(item.data + "") < 0) {
                      this.option1.push(item);
                  }
              });
          } else {
              this.option1 = temp;
          }
          this.fieldname = fieldname;
          this.multichktitle = title;
          this.dialogMultipleVisible = true;
      },
      closedialog(value, name) {
          if (value != "close") {
              this[name] = value;
          }
          this.dialogMultipleVisible = false;
      },
      //时间初始化
      initdate() {
          this.txtstartdate = this.$pub.InitDateTime();
          this.txtenddate = this.$pub.InitDateTime();
          this.txttimevalue = [new Date(2016, 9, 10, 0, 0), new Date(2016, 9, 10, 23, 59)];
      },
      currentChangeEvent1({ row, $rowIndex }) {
          this.currRowIndex = $rowIndex;
      },
      async initOption() {
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS6/LIS610",
                  method: "post",
                  data: {
                      action: "initOption",
                  },
              });

              this.pattypeOption = res.pattypeOption;
              this.deptOption = res.deptOption;
              this.hospOption = res.hospOption;
              this.doctorOption = res.doctorOption;
              this.rptunitOption = res.rptunitOption;
              this.rptunitGroupOption = res.rptunitGroupOption;
              this.reportcommOption = res.reportcommOption;
              this.wardOption = res.wardOption;
              this.labgroupOption = res.labgroupOption;
              this.specimenOption = res.specimenOption;
              this.userOption = res.userOption;
          } catch (e) {
              this.$message.warning(e);
          }
      },
      BtnQuery() {
          this.InitPage();
      },
      BtnSort() {
          this.$rmsort(
              { tableColumn: this.SortTableColumn, sortArr: this.sortArr },
              {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
              }
          )
              .then((res) => {
                  this.sortArr = res.data;
                  this.InitPage();
              })
              .catch(() => {});
      },
      BtnClear() {
          this.initdate();
          this.txthospcode = " ";
          this.txtreqdeptno = " ";
          this.txtlabgroup = " ";
          this.txtreqgroup = " ";
          this.txtpattype = " ";
          this.txtwardno = "";
          this.rdorcvdept = 1;
          this.infoitem = "";
          this.infocode = "";
          this.sortArr = [];
          this.tableData = [];
          this.chklist = {
              chkreq_groupname: false,
              chkreq_itemname: false,
              chkhospcode: false,
              chkpat_typecode: false,
              chkrecieve_user: false,
              chklabgroupid: false,
              chkreq_deptno: false,
              chkreq_wardno: false,
              chkyears: false,
              chkmonths: false,
              chkdays: false,
              chksend_user: false,
          };
      },
      chkevent(e, code, name) {
          //alert(this.chkcnt);
          if (e == "1") {
              if (this.chkcnt <= 7) {
                  this.chkcnt++;
                  if (this.infocode.indexOf(code) == -1) {
                      this.infocode += code + ",";
                      this.infoitem += name + ",";
                  }
              } else {
                  this.$alert("不能选择更多的分组！", "提示");
                  this.chklist[code] = false;
                  //console.log(this, this[code]);
              }
          } else {
              if (this.infocode.indexOf(code) > -1) {
                  this.chkcnt--;
                  this.infocode = this.infocode.replace(code, "");
                  this.infoitem = this.infoitem.replace(name, "");
              }
          }
      },
      hospChange(code, name) {
          this.txthospcode = code;
          this.hospname = name;
      },
      //导出
      BtnExport() {
          let data = this.getExportData();
          let filtertxt = this.getExportFilter();
          this.$pub.exportTableExcelWithData(data, this.exportTableColLen, "LIS621 标本签收统计.xlsx", filtertxt, "统计条件：");
      },
      // 获取当前导出文件的所有查询条件
      getExportFilter() {
          let filtertxt = "签收时间:" + XEUtils.toDateString(this.txtstartdate, "yyyy-MM-dd") + "至" + XEUtils.toDateString(this.txtenddate, "yyyy-MM-dd") + "; ";
          if(this.rdorcvdept) filtertxt += (this.rdorcvdept == 1 ? "检验科签收" : "工作组签收") + "; ";
          if(this.txtpattype) filtertxt += "病人类型:" + this.pattypename + "; ";
          if(this.txthospcode) filtertxt += "检验院区:" + this.hospname + "; ";
          if(this.txtreqgroup) filtertxt += "分单类别:" + this.reqgroupname + "; ";
          if(this.txtlabgroup) filtertxt += "检验组:" + this.getOptionName(this.labgroupOption.filter((item) =>  ("," + this.txtlabgroup + ",").indexOf("," + item.data + ",") > -1))+ "; ";
          if(this.txtreqdeptno) filtertxt += "申请科室:" + this.getOptionName(this.deptOption.filter((item) =>  ("," + this.txtreqdeptno + ",").indexOf("," + item.data + ",") > -1))+ "; ";
          if(this.txtwardno) filtertxt += "申请病区:" + this.getOptionName(this.wardOption.filter((item) =>  ("," + this.txtwardno + ",").indexOf("," + item.data + ",") > -1))+ "; ";
          let tatcoltxt = "";
          if(this.chklist.chkreq_groupname == "1") tatcoltxt += "分单类别、";
          if(this.chklist.chkpat_typecode == "1") tatcoltxt += "病人类型、";
          if(this.chklist.chkreq_deptno == "1") tatcoltxt += "科室、";
          if(this.chklist.chkyears == "1") tatcoltxt += "年、";
          if(this.chklist.chkreq_itemname == "1") tatcoltxt += "项目、";
          if(this.chklist.chkrecieve_user == "1") tatcoltxt += "签收人、";
          if(this.chklist.chkreq_wardno == "1") tatcoltxt += "病区、";
          if(this.chklist.chkmonths == "1") tatcoltxt += "月、";
          if(this.chklist.chkhospcode == "1") tatcoltxt += "院区、";
          if(this.chklist.chklabgroupid == "1") tatcoltxt += "检验工作组、";
          if(this.chklist.chksend_user == "1") tatcoltxt += "运送人、";
          if(this.chklist.chkdays == "1") tatcoltxt += "日、";
          if(tatcoltxt) filtertxt += "统计项目:" + tatcoltxt.substring(0, tatcoltxt.length - 1) + "; ";
          return filtertxt;
      },
      getOptionName(option) {
          if (option && option.length > 0) {
              let optionname = "";
              option.forEach((item) => {
                  if(item.hasOwnProperty("display")) {
                      optionname += item.display + ",";
                  } else {
                      optionname += item.label + ",";
                  }
              });
              return optionname.substring(0, optionname.length - 1);
          } else {
              return "";
          }
      },
      getExportData() {
          let datas = this.$refs.xTable.afterFullData;
          let exportColumn = XEUtils.clone(this.tableColumn, true);
          exportColumn.push({ title: "标本数", field: "cp_samplecnt" });
          exportColumn.push({ title: "人次", field: "cp_rs" });
          exportColumn.push({ title: "项次", field: "cp_cnt" });
          this.exportTableColLen = exportColumn.length;
          let columns = exportColumn.filter((item) => item.field);
          let footerData = {};
          columns.forEach((item, index) => {
              if (index === 0) {
                  footerData[item.field] = "总计";
              }
              if (["cp_cnt", "cp_rs", "cp_samplecnt"].includes(item.field)) {
                  footerData[item.field] = XEUtils.sum(datas, item.field);
              }
          });
          datas.splice(datas.length, 0, footerData);
          let headers = [columns.map((item) => item.title)];
          return headers.concat(
              datas.map((row) => {
                  return columns.map((column) => {
                      return this.retForamtVal(row[column.field], column.field);
                  });
              })
          );
      },
      toBuffer(wbout) {
          let buf = new ArrayBuffer(wbout.length);
          let view = new Uint8Array(buf);
          for (let index = 0; index !== wbout.length; ++index) view[index] = wbout.charCodeAt(index) & 0xff;
          return buf;
      },
      //打印
      BtnPrint(index) {
          if (index == "p") {
              let column = this.$refs.xTable.getTableColumn().tableColumn;
              let str = JSON.stringify(this.$pub.InitColumn(column));
              str += "\r";
              str += JSON.stringify(this.$refs.xTable.afterFullData);
              let sql = btoa(encodeURIComponent(str));
              jsObj.PrintCustomJsonReport("5031", sql, this.userno, "标本签收统计", "");
          } else {
              // 打印样式设计
              let column = this.$refs.xTable.getTableColumn().tableColumn;
              let str = JSON.stringify(this.$pub.InitColumn(column));
              str += "\r";
              str += JSON.stringify(this.$refs.xTable.afterFullData);
              //console.log("str", str);
              let sql = btoa(encodeURIComponent(str));
              jsObj.SetCustomJsonPrintConfig("5031", sql, this.userno, "标本签收统计");
          }
      },
      async InitPage() {
          try {
              if (this.chkcnt < 1) {
                  this.$alert("请勾选右边分组条件！", "信息");
                  return false;
              }
              this.xTableLoading = true;
              const response = await this.$tool.request({
                  url: "LIS/LIS6/LIS621",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "InitPage",
                      txtstartdate: this.txtstartdate, //标本开始日期
                      txtenddate: this.txtenddate, //标本结束日期
                      txthospcode: this.txthospcode, //检验院区
                      txtreqdeptno: this.txtreqdeptno, //申请科室
                      txtlabgroup: this.txtlabgroup, //检验组别
                      txtreqgroup: this.txtreqgroup, //分单类别
                      txtpattype: this.txtpattype, //病人类型
                      txtwardno: this.txtwardno, //申请病区
                      rdorcvdept: this.rdorcvdept,
                      infocode: this.infocode, //要查询的列数
                      infoitem: this.infoitem,
                      sortArr: this.sortArr, //排序
                  },
              });
              if (!!response.RData.Data) {
                  this.tableColumn = response.RData.Cols;
                  this.tableData = response.RData.Data;
                  this.xTableLoading = false;
              } else {
                  // this.InitPage();
                  this.$message.warning("查询超时,可以尝试缩短签收日期或减少分组条件！");
                  this.xTableLoading = false;
              }
          } catch (e) {
              this.xTableLoading = false;
              this.$alert(e, "消息");
          }
      },
      formatFun({ cellValue, column, row }) {
          return this.retForamtVal(cellValue, column.property);
      },
      retForamtVal(cellValue, column) {
          if (["hospcode"].includes(column)) {
              try {
                  if (cellValue == "All") {
                      return "全部医院";
                  } else {
                      let hospname = this.hospOption.find((m) => m.data == cellValue);
                      if (hospname != undefined && hospname != null) {
                          return hospname.display;
                      } else {
                          return cellValue;
                      }
                  }
              } catch {
                  return cellValue;
              }
          } else if (["req_deptno"].includes(column)) {
              try {
                  //科室
                  let deptname = this.deptOption.find((m) => m.data == cellValue);
                  if (deptname != undefined && deptname != null) {
                      return deptname.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          } else if (column == "pat_typecode") {
              try {
                  let pattypename = this.pattypeOption.find((m) => m.data == cellValue);
                  if (pattypename != undefined && pattypename != null) {
                      return pattypename.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          } else if (["req_wardno"].includes(column)) {
              //申请病区
              try {
                  let wardname = this.wardOption.find((m) => m.data == cellValue);
                  if (wardname != undefined && wardname != null) {
                      return wardname.display;
                  } else {
                      return cellValue;
                  }
              } catch {}
          } else if (["recieve_user"].includes(column)) {
              //签收人
              try {
                  let username = this.userOption.find((m) => m.data == cellValue);
                  if (username != undefined && username != null) {
                      return username.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          } else if (["send_user"].includes(column)) {
              //运送人
              try {
                  let username = this.userOption.find((m) => m.data == cellValue);
                  if (username != undefined && username != null) {
                      return username.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          }else if (column == "labgroupid") {
              //检验工作组
              try {
                  let labgroup = this.labgroupOption.find((m) => m.data == cellValue);
                  if (labgroup != undefined && labgroup != null) {
                      return labgroup.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          } else if (column == "pat_sex") {
              if (cellValue == "1") {
                  return "男";
              } else if (cellValue == "2") {
                  return "女";
              } else {
                  return "";
              }
          } else {
              return cellValue;
          }
      },
      footerCellClassName({ $rowIndex, column, columnIndex }) {
          if (columnIndex === 0 || ["cp_cnt", "cp_rs", "cp_samplecnt"].includes(column.property)) {
              if ($rowIndex === 0) {
                  return "col-blue";
              } else {
                  return "col-red";
              }
          }
      },
      querySearch(queryString, cb) {
          var restaurants = this.reportcommOption;
          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          // 调用 callback 返回建议列表的数据
          cb(results);
      },
      createFilter(queryString) {
          return (restaurant) => {
              return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
          };
      },
      handleSelect(item) {
          this.txtmemo = item.value;
      },
      footerMethod({ columns, data }) {
          return [
              columns.map((column, columnIndex) => {
                  if (columnIndex === 0) {
                      return "总计";
                  }
                  if (["cp_cnt", "cp_rs", "cp_samplecnt"].includes(column.property)) {
                      return XEUtils.sum(data, column.property);
                  }
                  return null;
              }),
          ];
      },
      reqgroupChange(code, name) {
          this.txtreqgroup = code;
          this.reqgroupname = name;
      },
      seccodeChange(code, name) {
          this.txtpattype = code;
          this.pattypename = name;
      },
  },
};
</Script>

<style scoped>
.pagetop {
  width: 100%;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  border: solid 1px #ccc;
  position: absolute;
  z-index: 99;
  height: 130px;
  overflow-x: auto;
  overflow-x: overlay;
}

.pagecenter {
  position: absolute;
  top: 135px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}
.el-checkbox__label {
  padding: 0px;
}
.left_nav {
  width: 20%;
  height: 100%;
  border-right: 1px solid #ccc;
  padding: 0px 0px 0px 0px;
  float: left;
  display: inline;
}
.left_nav div {
  cursor: pointer;
  height: 40px;
  width: 100%;
  float: left;
  padding-left: 20px;
  line-height: 40px;
}
.left_nav .active {
  background-color: DeepSkyBlue;
}
.right_nav {
  width: 80%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  float: left;
  display: inline;
}

table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}

.table1style tr td {
  padding: 0px 2px 0px 5px;
}
::v-deep .mytable-style .vxe-footer--column.col-blue {
  color: blue !important;
  font-weight: bold;
}
::v-deep .mytable-style .vxe-body--row.row-blue {
  color: blue !important;
  font-weight: bold;
}

::v-deep .el-icon-time {
  line-height: 18px !important;
}
::v-deep .el-range__close-icon {
  line-height: 18px !important;
}
::v-deep .el-range-editor--small .el-range-separator {
  line-height: 17px !important;
}
::v-deep .mychkclass .el-checkbox {
  margin-right: 15px;
}
.operation-list {
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
}
::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 5px;
  width: 5px;
}
/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
  margin-right: 2px;
  border-width: 4px 4px 4px 0;
  border-color: #f1f1f1 transparent #f1f1f1 #f1f1f1;
  background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
  border-color: #d2d2d2 transparent #d2d2d2 #d2d2d2;
}
/* Right */
::-webkit-scrollbar-button:horizontal:increment {
  margin-left: 2px;
  border-width: 4px 0 4px 4px;
  border-color: #f1f1f1 #f1f1f1 #f1f1f1 transparent;
  background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:increment:hover {
  border-color: #d2d2d2 #d2d2d2 #d2d2d2 transparent;
}
</style>
